<template>
  <el-aside :width="`${optionStore.asideWidth}px`">
    <div class="logo">
      <img src="@/assets/image/logo.png" alt="logo" />
      <h3 class="title" v-if="!isCollapse">星球boke后台管理</h3>
    </div>

    <div class="menu">
      <el-menu
        :collapse="isCollapse"
        :router="true"
        :default-active="activePath"
      >
        <template v-for="item in optionStore.menuList" :key="item.id">
          <el-menu-item :index="item.path">
            <span class="iconfont icon" :class="item.icon"></span>
            <template #title>
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item>
        </template>
      </el-menu>
    </div>

    <div class="change_theme">
      <el-switch v-model="isDarkTheme" @change="changeHandle" />
      <span class="mode_text" v-if="!isCollapse">{{ themeText }}</span>
    </div>
  </el-aside>
</template>

<script setup lang="ts">
import { ref, watchEffect, watch } from 'vue'
import { useRoute } from 'vue-router'

import useOption from '@/pinia/modules/optins'

const optionStore = useOption()
const route = useRoute()

const isDarkTheme = ref(true) // 是否为黑夜主题
const themeText = ref('亮色模式') // 模式显示文字
const isCollapse = ref(false) // 侧边栏是否折叠
const activePath = ref('/home') // 当前激活的路由

// 监听路由变化
watch(
  () => route.path,
  (value) => {
    console.log(value)
    activePath.value = value
  },
  {
    immediate: true
  }
)

// 计算当前的主题
watchEffect(() => {
  isDarkTheme.value = optionStore.theme === 'theme-dark' ? true : false
  themeText.value = isDarkTheme.value ? '暗色模式' : '亮色模式'
  isCollapse.value = optionStore.asideWidth === 220 ? false : true
})

// 切换主题
const changeHandle = (e: boolean) => {
  if (e) {
    optionStore.saveTheme('theme-dark')
  } else {
    optionStore.saveTheme('theme-light')
  }
  document.documentElement.setAttribute('class', optionStore.theme)
}
</script>

<style scoped lang="less">
div,
span,
.el-aside,
.el-menu {
  transition: all 0.3s;
}
.el-aside {
  height: 100vh;
  color: var(--fontColorTop);
  overflow-x: hidden;
  background-color: var(--bgColorTop);

  .logo {
    margin-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bgColorBase);

    img {
      width: 30px;
      height: 30px;
    }

    .title {
      font-size: 16px;
      white-space: nowrap;
      margin-left: 10px;
    }
  }

  .menu {
    height: 80vh;
    .el-menu {
      border: none;
      background-color: var(--bgColorTop);
      .icon {
        margin-right: 10px;
      }
      span {
        color: var(--fontColorTop);
      }
      :deep(.is-active span) {
        color: #409eff !important;
      }
    }
  }

  .change_theme {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--bgColorBase);
    border-bottom: 1px solid var(--bgColorBase);

    .mode_text {
      white-space: nowrap;
      margin-left: 10px;
    }
  }
}
</style>
